@import './../../index.scss';

#ModuleTitle {
  .sm_tit {
    // border-left: p-w(8) solid $btn-color;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFangSC;
    font-weight: 500;
    color: #333;
    // padding-left: p-w(3);
    width: 100%;
    display: flex;
    align-items: center;
  }
  .check_margin {
    margin-top: 10px;
  }

  .sp {
    justify-content: space-between;
  }

  .bor {
    width: p-w(8);
    background: $btn-color;
    height: 15px;
    margin-right: p-w(5);
  }

  .exp {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFangSC;
    font-weight: 400;
    color: rgba(51, 51, 51, 0.7);
    display: flex;
    align-items: flex-start;
    margin-top: 16px;

    span {
      width: 6px;
      height: 6px;
      border-radius: 100%;
      background: $btn-color;
      display: inline-block;
      margin-right: p-w(5);
      margin-top: 6px;
    }
  }
  .explain {
    font-size: 13px;
    color: #9d9d9d;
  }
}
@include media('<=phone') {
  #ModuleTitle {
    .sm_tit {
      font-family: PingFangSC-Medium, PingFangSC;
      font-weight: 500;
      color: #333;
      width: 100%;
      display: flex;
      align-items: center;
    }
    .bor {
      width: m-w(12);
      height: 15px;
      margin-right: m-w(8);
    }

    .tit_bor {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333;
    }
    .cln {
      white-space: nowrap;
    }
    .mus {
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      font-size: m-w(22);
      white-space: nowrap;
    }
    .check_margin {
      white-space: nowrap;
      margin-top: 0;
      font-size: m-w(26);
    }
    .exp {
      align-items: flex-start;
      span {
        width: m-w(12);
        height: m-w(12);
        border-radius: 100%;
        background: $btn-color;
        display: inline-block;
        margin-right: m-w(16);
        margin-top: m-w(13);
      }
    }
  }
}
